<template>

	<view class="main">
		<van-toast id="van-toast" />
		<view class="hand1">
			<image :src="wechat_view.logo" @click="gzbtn"></image>
			<view class="htap">

				<view class="htapone" @click="toChongzhi">
					<view class="honeleft">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg/81.png"></image>
						账户充值
					</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg/9.png"></image>
				</view>

				<view class="htapone" @click="toCardManage">
					<view class="honeleft">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg/101.png"></image>
						电卡管理
					</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg/11.png"></image>
				</view>


				<view class="htapone" @click="toNearestCharging">
					<view class="honeleft">
						<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg/121.png"></image>
						附近电站
					</view>
					<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg/13.png"></image>
				</view>

			</view>
		</view>
		<view class="kant">
			<view class="ddtap" v-for="item in poster_list" :key="item.id" @click="tiaozhuan(item.url)">
				<image :src="item.img" v-if="item.typeId == 1"></image>
				<video :src="item.img" v-else></video>
			</view>

			<view class="ddtap">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg/ddc.png"></image>
			</view>
			<view class="saoma" @click="toScan">
				<image src="https://qiniu.jxyutuo.com/yanqin/tabBarimg/smcd.png"></image>
				<view class="smtxt">扫码充电</view>
			</view>
			<view class="yctap" @click="goyuan">远程充电</view>
		</view>
		<van-popup :show="dshow" :close-on-click-overlay="false">
			<view class="tan">
				<view class="xz">
					<image src="https://qiniu.jxyutuo.com/yanqin/zhiyin/dcar.png"></image>
					<view class="xzone">欢迎使用智能充电充电系统</view>
					<view class="xztwo">我们将为您展示一些重要功能的操作指引</view>
					<view class="xzthree">再次查看,请进入"个人中心-使用帮助-操作指引"</view>
				</view>
				<view class="anniu">
					<view class="anniu1" @click="colosezhi">跳过</view>
					<view class="anniu1" @click="gozhi">接受</view>
				</view>
			</view>
		</van-popup>

		<van-popup :show="phoneshow" @close="phoneshow=false">
			<view class="tishi">
				<view class="tstou">提示</view>
				<view class="tsnei">
					请先扫设备二维码绑定小区后再操作。
				</view>
				<view class="kbtn" @click="tishibtn">
					确认
				</view>
			</view>
		</van-popup>

		<van-popup :show="gzshow" @close="gzshow=false">
			<view class="gztan">
				<view class="gztanimg">
					<img :src="wechat_view.qrcode"></img>
				</view>
				<view class="gztantxt">
					长按识别二维码，关注公众号，接收充电消息通知
				</view>
			</view>
		</van-popup>
		

		<tabBar tab01="2"></tabBar>

	</view>

</template>

<script>
	import tabBar from '../../components/tabBar/tabBar.vue'
	import {
		Config
	} from '../../common/Config.js'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				dshow: false, //是否显示使用指南
				poster: 1,
				projectPhone: '', //小区电话
				phoneshow: false, //是否绑定绑定小区
				wechat_view: [], //公众号信息
				gzshow: false, //公众号弹窗
				poster_list: [], //广告位列表
				user_view: [], //会员信息
			}
		},
		onLoad() {
			// let that = this;
			// that.get_poster_list();
			// that.get_wechat_view();
			// console.log(uni.getStorageSync('userToken'));
			// console.log(uni.getStorageSync('user'));
			// var s = that.pad(parseInt('0D', 16).toString(10), 2);
			// console.log(s);
		},
		onShow() {
			let that = this;
			if(uni.hideHomeButton){
				uni.hideHomeButton();
			}
			//that.get_poster_list();
			that.get_wechat_view();
			that.getUserInfo();
		},
		methods: {
			//跳转充值页面
			toChongzhi() {
				let that = this;
				if (uni.getStorageSync('userToken') == '' || uni.getStorageSync('user').projectId == 0) {
					that.phoneshow = true;
				} else {
					uni.navigateTo({
						url: '/pages/account_recharge/account_recharge'
					})
				}
			},
			//跳转电表卡管理
			toCardManage() {
				let that = this;
				if (uni.getStorageSync('userToken') == '' || uni.getStorageSync('user').projectId == 0) {
					that.phoneshow = true;
				} else {
					uni.navigateTo({
						url: '/pages/electric_card_management/electric_card_management'
					})
				}
			},
			//跳转附近电站
			toNearestCharging() {
				let that = this;
				if (uni.getStorageSync('userToken') == '' || uni.getStorageSync('user').projectId == 0) {
					that.phoneshow = true;
				} else {
					uni.navigateTo({
						url: '/pages/nearest_charging/nearest_charging'
					})
				}
			},
			//把16进制转化成10进制
			pad(num, n) {
				var len = num.toString().length;
				while (len < n) {
					num = "0" + num;
					len++;
				}
				return num;
			},

			//远程充电
			goyuan() {
				uni.navigateTo({
					url: '../remote_charging/remote_charging'
				})
			},
			colosezhi() {
				this.dshow = false
				var usertype = 'type_' + uni.getStorageSync('userId')
				uni.setStorageSync(usertype, 1)

				this.$base.request('guide/state', 'PUT')
					.then(res => {


					})
					.catch(err => {

					})
			},
			gozhi() {
				this.$base.request('guide/state', 'PUT')
					.then(res => {


					})
					.catch(err => {

					})

				uni.navigateTo({
					url: '../Operation_guide/Operation_guide'
				})
			},

			//弹出扫码
			toScan() {
				let that = this;
				uni.scanCode({
					scanType: ['qrCode'],
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						var str = res.result;
						var params_arr = str.split('/');
						var deviceId = params_arr[params_arr.length - 2];
						var port = params_arr[params_arr.length - 1];
						uni.navigateTo({
							url: '/pages/poweron/poweron?device=' + deviceId + '&port=' + port +
								'&cmd=' + 0 + '&from=' + 1,
						});
					}
				});
			},

			//绑定提示弹窗点击
			tishibtn() {
				this.phoneshow = !this.phoneshow;
			},

			//公众号弹窗点击
			gzbtn() {
				this.gzshow = !this.gzshow;
			},
			//获取会员所处公众号的信息
			get_wechat_view() {
				let that = this;
				let data = {
					appKey: Config.appkey
				}
				that.$base.request('wechat/view', 'GET', data)
					.then(res => {
						if (res.data.code == 200) {
							var view = res.data.data;
							if (view.logo) {
								view.logo = Config.imgapi + view.logo;
							}
							if (view.qrcode) {
								view.qrcode = Config.imgapi + view.qrcode;
							}
							that.wechat_view = view;
							console.log(view);
							uni.setStorageSync('wechat_view', view);
						} else {
							//that.$toast.fail(res.data.msg)
						}
					})
					.catch(err => {

					})
			},
			getUserInfo() {
				let that = this;
				that.$base.request('user/userInfo', 'GET')
					.then(res => {
						if (res.data.code == 200) {
							console.log(res.data.data);
							that.userlist = res.data.data
							uni.setStorageSync('userId', that.userlist.id)
							that.userlist.id = that.pad(that.userlist.id, 8)
							uni.setStorageSync('user', that.userlist)
							uni.setStorageSync('phone', that.userlist.phone)
							uni.setStorageSync('Name', that.userlist.realName)
							
							if (res.data.data.subscribe == 0) {
								// uni.redirectTo({
								// 	url: '/pages/qr_code/qr_code'
								// })
								// return
							}
						}
					})
					.catch(err => {
				
					})
			},
			//获取广告位
			get_poster_list() {
				let that = this;
				let data = {
					point: 'homePage'
				}
				that.$base.request('poster/getPosterList', 'GET', data)
					.then(res => {
						if (res.data.code == 200) {
							var list = res.data.data
							console.log(list);
							that.poster_list = list;

						} else {
							//that.$toast.fail(res.data.msg);
						}
					})
					.catch(err => {

					})
			},
		},
		
		onShareAppMessage(res) {
			return {
				title: '欢迎使用'+uni.getStorageSync('wechat_view').wechatName,
				path: 'pages/login/login',
				imageUrl: uni.getStorageSync('wechat_view').logo,
			}
		},
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #2A3034
	}

	.main {
		width: 100%;
		overflow-x: hidden;
		background-color: #2A3034;
		height: 100vh;

		.foothand {
			position: absolute;
			z-index: 9;
			top: 0upx;
			left: 5%;
			width: 90%;
			background: linear-gradient(180deg, #8BC21C 0%, #A8D628 100%);
			border-radius: 24upx;
			padding: 10upx 24upx;
			box-sizing: border-box;
			margin-top: 30upx;
			color: #fff;
		}

		.gztan {
			width: 650upx;
			background-color: #FFFFFF;
			text-align: center;
			padding: 70upx 0;

			.gztanimg {
				width: 350upx;
				height: 350upx;
				margin: 0 auto;

				img {
					width: 350upx;
					height: 350upx;
				}
			}

			.gztantxt {
				margin-top: 30upx;
				font-size: 20upx;
			}
		}

		.hand {
			width: 100%;
			height: 250upx;
			text-size-adjust: 100% !important;
			-webkit-text-size-adjust: 100% !important;
			-moz-text-size-adjust: 100% !important;
			background: url('https://qiniu.jxyutuo.com/yanqin/tabBarimg/indexhand1.png') no-repeat;
			// background-color: blue;
			// border-radius: 0 0 5% 5%;
			// background-image: linear-gradient(to right, #5260Ef , #428DE9);
			background-size: cover;
			box-sizing: border-box;
			padding-top: 50upx;
			position: relative;
			margin-bottom: 650upx;

			image {
				width: 177upx;
				height: 80upx;
				// margin-top: 80upx;
				margin-left: 36upx;
			}

			.htap {
				width: 100%;
				position: absolute;
				height: 700upx;
				left: 5%;
				margin-top: 90upx;

				.htapone {
					padding: 0 36upx;
					box-sizing: border-box;
					width: 90%;
					height: 200upx;
					background: #3A4044;
					border-radius: 6upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 32upx;

					image {
						width: 146upx;
						height: 146upx;
						margin: 0;
					}

					.honeleft {
						font-size: 34upx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						display: flex;
						align-items: center;

						image {
							width: 160upx;
							height: 160upx;
							margin: 0 auto;
							margin-right: 24upx;
						}
					}
				}
			}
		}

		.hand1 {
			width: 100%;
			height: 250upx;
			text-size-adjust: 100% !important;
			-webkit-text-size-adjust: 100% !important;
			-moz-text-size-adjust: 100% !important;
			background: url('https://qiniu.jxyutuo.com/yanqin/tabBarimg/indexhand1.png') no-repeat;
			// background-color: blue;
			// border-radius: 0 0 5% 5%;
			// background-image: linear-gradient(to right, #5260Ef , #428DE9);
			background-size: cover;
			box-sizing: border-box;
			position: relative;
			margin-bottom: 650upx;

			image {
				width: 177upx;
				height: 177upx;
				// margin-top: 80upx;
				margin-left: 36upx;
			}

			.htap {
				width: 100%;
				position: absolute;
				height: 700upx;
				left: 5%;
				margin-top: 40upx;

				.htapone {
					padding: 0 36upx;
					box-sizing: border-box;
					width: 90%;
					height: 200upx;
					background: #3A4044;
					border-radius: 6upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 32upx;

					image {
						width: 146upx;
						height: 146upx;
						margin: 0;
					}

					.honeleft {
						font-size: 34upx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						display: flex;
						align-items: center;

						image {
							width: 160upx;
							height: 160upx;
							margin: 0 auto;
							margin-right: 24upx;
						}
					}
				}
			}
		}

		.kant {
			width: 100%;
			box-sizing: border-box;
			padding: 0 36upx;
			margin-bottom: 140upx;

			.ddtap {
				width: 100%;
				height: 251upx;
				margin: 0 auto;

				image {
					width: 100%;
					height: 251upx;
				}

				video {
					width: 100%;
					height: 251upx;
				}
			}

			.saoma {
				width: 678upx;
				display: flex;
				height: 110upx;
				background: linear-gradient(180deg, #8BC21C 0%, #A8D628 100%);
				box-shadow: 0px 5px 24px 0px rgba(139, 195, 28, 0.4);
				border-radius: 60upx;
				margin: 0 auto;
				align-items: center;
				justify-content: center;
				margin-top: 30upx;

				image {
					width: 63upx;
					height: 63upx;
				}

				.smtxt {
					font-size: 36upx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-left: 24upx;
				}

			}

			.yctap {
				width: 100%;
				text-align: center;
				font-size: 26upx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 25upx;
			}
		}

		.tan {
			width: 600upx;
			padding: 100upx 0;

			.xz {
				text-align: center;
				padding: 0 30upx;

				image {
					width: 300upx;
					height: 289upx;
				}

				.xzone {
					margin-top: 28upx;
					font-weight: bold;
					color: #000000;
					margin-bottom: 80upx;
					font-size: 38upx;

				}

				.xztwo {
					margin-top: 15upx;
					font-weight: 600;
					color: #90c038;
					font-size: 30upx;
				}

				.xzthree {
					margin-top: 30upx;
					font-weight: 600;
					color: #4e4e4e;
					font-size: 20upx;
					margin-bottom: 40upx;
				}
			}

			.anniu {
				display: flex;
				justify-content: space-between;
				padding: 0 90upx;
				font-weight: 600;
				font-size: 28upx;
				color: #333333;

				.anniu1 {
					width: 130upx;
					height: 55upx;
					line-height: 55upx;
					border-radius: 40upx;
					text-align: center;
					border: #333333 2upx solid;
				}
			}
		}

		.tishi {
			.tstou {
				color: #333333;
				font-size: 32upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
			}

			.tsnei {
				font-size: 28upx;
				padding: 30upx;
				color: #555555;
			}

			.kbtn {
				width: 570upx;
				height: 75upx;
				background: #4b98ed;
				font-size: 30upx;
				border-radius: 16upx;
				font-family: PingFang SC Bold, PingFang SC Bold-Bold;
				font-weight: 700;
				text-align: center;
				line-height: 75upx;
				margin: 0 auto;
				margin-top: 40upx;
				color: #ffffff;
			}
		}
	}
</style>